<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级点名</title>
     <style>
    body{
        margin: 0 auto;
        text-align: center;
    }
    .box{
        display: block;
        background-color:white;
        margin: 0 auto;
        padding-top: 50px;
        border-radius: 10px;
        width: 300px;
        height: 150px;
        box-shadow: 0px 0px 4px 4px #c3c3c3;
    }
    .showName{
        background-color: #c3c3c3;
        margin: 0 auto;
        border-radius: 5px;
        width: 200px;
        height: 45px;
        line-height:45px;
        font-size: 18px;
        font-weight: bolder;
        
    }
    button{
        margin-top: 30px;
        background-color: #017515;
        border: #c3c3c3 1px solid;
        border-radius: 3px;
        box-shadow:0px 0px 4px 2px #c3c3c3;
        padding: 5px 20px;
    }
    </style>
</head>
<body>
    <h1>四班点名器</h1>
    <div class="box">
        <div id="sid">
            随机抽一位大冤种
        </div>
        <div id="sp" style="width: 300px; ;"></div>
        <button id="bid" onclick="doShowName();">开始</button>
    <script type="text/javascript">
 var Data =["郑玮喆","庄云","廖治先","郑文源","戴俊锋","陈昊童","谢金金","占志新","张淑芳","刘永潘","廖柏成","郑宗帅","李韦峰","吴欣燕","陈梅香","陈立智","袁贵森","赵浩敏","林世涛","罗启恒","卢国建","黄柱菘","陈鹏","张耀仁","陈华伟","张正豪","韦仲晓","黄富贵","陆建锋","曾德森","吴文龙","陆利群" ,"黄雄","王世财" ,"张先杰" ,"胡基耀" ,"马鑫涛", "李涛","杨凌翔","罗此东","唐皓颖","白婉婷"]
        var times = 0;
        var st;
        function fn() {
            times++;
            var num = parseInt(Math.random() * 41 + 1);
            var arr = Data[num-1]
            document.getElementById('sp').innerText = '原来大冤种是你:' +arr;
            if (times >= 30 && num==10) {
                clearInterval(st);
            }
        }
        function doShowName(){
            times = 0;
            st = setInterval (fn ,100);
        }
    </script>
</body>
</html>
